<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">
        问题单编号：{{ detailObject.id }}
        <span style="margin-left:10px;" :class="detailObject.status | statusTypeFilter" />
        <span class="statusName">{{ detailObject.status | nameFilter }}</span>
      </div>

      <div class="detailContent">
        <div class="title"><span>提单环节</span></div>
      </div>

      <div class="main">
        <div class="tab">
          <div class="row">
            <label>问题单类型：</label>
            <div class="detail"><div>{{ detailObject.typeName }}</div></div>
          </div>
          <div class="row">
            <label>位置描述：</label>
            <div
              style="width:400px;margin-bottom: -3px;"
              :title="detailObject.location"
              class="detail textHidden"
            >{{ detailObject.location }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <label>检查内容：</label>
            <div
              style="width:400px;margin-bottom: -3px;"
              :title="detailObject.content"
              class="detail textHidden"
            >{{ detailObject.content }}</div>
          </div>
          <div class="row">
            <label>整改人：</label>
            <div class="detail">{{ detailObject.rectifyPersonName }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <div class="imgtext">照片：</div>
            <!-- <label>照片：</label> -->
            <div v-for="(item, index) in detailObject.files" :key="index" class="imgList">
              <div @click="lookimg(item,index)">
                <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="item.path" :alt="item.name">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="inspectionsObject.length>0" class="detailContent">
        <div class="title"><span>报验环节</span></div>
      </div>

      <div v-for="(item, index) in inspectionsObject" :key="index" class="main">
        <div class="tab">
          <div class="row">
            <label>报验人：</label>
            <div class="detail">{{ item.creatorName }}</div>
          </div>
          <div class="row">
            <label>施工阶段：</label>
            <div class="detail">{{ item.constructionStage }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <label>报验类型：</label>
            <div class="detail"><div>{{ item.typeName }}</div></div>
          </div>
          <div class="row">
            <label>报验描述：</label>
            <div
              style="width:400px;margin-bottom: -3px;"
              :title="item.description"
              class="detail textHidden"
            >{{ item.description }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <label>验收人：</label>
            <div class="detail">{{ item.acceptorName }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <div class="imgtext">照片：</div>
            <div v-for="(img, key) in item.files" :key="key" class="imgList">
              <div @click="lookimg(img,index)">
                <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="img.path" :alt="img.name">
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.replyList.length>0" class="tab">
          <div class="row">
            <div class="imgtext">回复内容：</div>
            <div v-for="(text, key) in item.replyList" :key="key" class="imgList1">
              <div class="imagetext">{{ text.replyContent }}</div>
              <div v-if="text.files.length>0" class="repimg">
                <div v-for="(img, index1) in text.files" :key="index1">
                  <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="img.path" :alt="img.name">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="detailContent">
        <div class="title"><span>验收环节</span></div>
      </div> -->

    </div>

  </div>
</template>

<script>
import { detailInspect } from '@/api/patrolExamine'
import { getUserList } from '@/api/user'

export default {
  name: 'DetailPatrol',
  filters: {
    statusTypeFilter(status) {
      const statusMap = {
        unsolved: 'unsolvedColor',
        solving: 'solvingColor',
        recovering: 'recoveringColor',
        reject: 'resolvedColor',
        success: 'resolvedColor'
      }
      return statusMap[status]
    },
    nameFilter(status) {
      const statusMap = {
        unsolved: '未解决',
        solving: '解决中',
        recovering: '报验中',
        reject: '已驳回',
        success: '已验收'
      }
      return statusMap[status]
    }
  },
  components: {
  },
  data() {
    return {
      detailObject: {},
      inspectionsObject: [],
      loading: false,
      dialogVisible: false,
      userList: []
    }
  },
  computed: {

  },
  mounted() {
    // this.getList()
    this.getDatail()
  },
  methods: {
    // 获取用户信息
    async getList() {
      const res = await getUserList()
      if (res.code === 200) {
        this.userList = res.data
      }
    },
    // 获取详情信息
    async getDatail() {
      const id = this.$route.query.id
      const res = await detailInspect(id)
      if (res.code === 200) {
        this.detailObject = res.data.inspectTicket
        if (res.data.inspections) {
          this.inspectionsObject = res.data.inspections
        }
      }
    },
    // 查看图片
    lookimg(path, index) {

    },
    comeBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
        .statusName{
          font-size:12px;
          font-weight:400;
          color:rgba(255,255,255,0.6);
        }
      }
      .detailContent{
        .title{
          padding: 0;
          height:28px;
          background:rgba(247,181,0,0.2);
          font-size:14px;
          font-weight:500;
          color:rgba(247,181,0,1);
          width: 90%;
          margin-left: 34px;
          span{
            margin: 0 0 0 20px;
            line-height: 28px;
          }
        }
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .detail{
              font-size:14px;
              font-weight:400;
              color:rgba(255,255,255,0.65);
              display: inline-block;
            }
            .imgtext{
              font-size: 14px;
              font-weight: 400;
              color: rgba(247,181,0,.8);
              margin: 0 0 20px 0;
            }
            .imgList{
              // display: flex;
              float: left;
              div{
                width: 150px;
                // flex: 1;
              }
            }
            .imgList1{
              div{
                width: 150px;
                // flex: 1;
              }
              .repimg{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
              }
              .imagetext{
                font-size:14px;
                font-weight:400;
                color:rgba(255,255,255,0.65);
                margin: 0 0 10px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 1024px;
              }
            }
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
  .imgtitle{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
  }
</style>
